<template>
  <el-container>
    <el-header class="home-header">
      <span></span>
      <el-button type="primary" @click="backToLogin">退出</el-button>
    </el-header>
    <el-container>
      <el-aside :width="isCollapse ? '64px' :' 200px'">
        <el-menu
        router
        :collapse="isCollapse"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        unique-opened
        :collapse-transition="false"
        :default-active="activePath"
        >
            <div class="collapse" @click="clickCollapse">|||</div>
            <el-submenu  :index="item1.path" v-for="item1 in leftMenuData" :key="item1.id">
                <template slot="title">
                <i class="el-icon-location"></i>
                <span>{{item1.authName}}</span>
                </template>
                <el-menu-item @click="clickSubItem(item2.path)" :index="item2.path" v-for="item2 in item1.children" :key="item2.id">
                    <template slot="title">
                        <i class="el-icon-location"></i>
                        <span>{{item2.authName}}</span>
                    </template>     
                </el-menu-item>
            </el-submenu>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script type="text/ecmascript-6">
import {requestHomeMenu} from "@/network/home.js"
export default {
    data() {
        return {
                //左侧列表数据
                leftMenuData: [],
                //是否折叠
                isCollapse: false,
                activePath:''
            }
    },
    created() {
        //获取数据
        this.getMenudata()
        //获取激活的路径
        this.activePath = window.sessionStorage.getItem('activePath')
    },
    methods: {
        //后退按钮的功能实现
        backToLogin(){
            window.sessionStorage.clear()
            this.$router.back()
        },
        //折叠左侧列表
        clickCollapse(){
            this.isCollapse = !this.isCollapse
        },
        //点击二级菜单，保存菜单的路径
        clickSubItem(path){
            this.activePath = path
            window.sessionStorage.setItem('activePath',path)
        },


        //获取左侧猜的数据
        async getMenudata(){
            const {data} = await requestHomeMenu()
            if(data.meta.status !== 200) return this.$message.error('获取左侧列表数据失败')
            this.leftMenuData = data.data
            
        }
    },
}
</script>

<style lang="less" scoped>
.home-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #373d41;
}
.el-container{
    height: 100%;
    .el-aside{
        height: 100%;
        background-color: #373d41;
        .el-menu{
            overflow: hidden;
            .collapse{
                text-align: center;
                background-color: pink;
            }
            .el-submenu{
                // overflow: hidden;
            }
        }
    }
}

</style>
